<template>
  <basic-container>
    <el-form
      :model="quryForm"
      ref="quryForm"
      class="demo-form-inline"
      label-width="80px"
    >
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="日志描述:">
            <el-input
              clearable
              v-model="quryForm.title"
              placeholder="日志描述"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="请求RUL:">
            <el-input
              clearable
              v-model="quryForm.reqUrl"
              placeholder="请求RUL"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="操作人:">
            <el-input
              clearable
              v-model="quryForm.createBy"
              placeholder="操作人"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="操作时间:">
            <el-date-picker
              v-model="queryDateange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" :offset="10">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="queryBtn"
            >查询</el-button
          >
          <el-button
            size="small"
            icon="el-icon-delete"
            @click="resetQuryForm('quryForm')"
            >清空</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      ref="multipleTable"
      max-height="550"
      border
      row-key="postId"
      v-loading="isLoading"
      element-loading-text="加载中，请稍后..."
      element-loading-background="rgba(255, 255, 255, .5)"
      element-loading-spinner="el-icon-loading"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" fixed="left" width="55">
      </el-table-column>
      <el-table-column
        align="center"
        type="index"
        label="#"
        fixed="left"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="title"
        label="日志描述"
        :show-overflow-tooltip="true"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop="serviceName"
        label="请求服务名称"
        :show-overflow-tooltip="true"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="reqUrl"
        label="请求URL"
        :show-overflow-tooltip="true"
        width="300"
      >
      </el-table-column>
      <el-table-column prop="reqMethod" label="请求方式" width="90">
      </el-table-column>
      <el-table-column
        prop="reqParams"
        label="请求参数"
        :show-overflow-tooltip="true"
        width="280"
      >
      </el-table-column>
      <el-table-column
        prop="resultMsg"
        label="响应结果"
        :show-overflow-tooltip="true"
        width="280"
      >
      </el-table-column>
      <el-table-column prop="exeTime" label="耗时" width="90">
        <template slot-scope="scope"> {{ scope.row.exeTime }}ms </template>
      </el-table-column>
      <el-table-column prop="handleIp" label="请求IP" width="100">
      </el-table-column>
      <el-table-column prop="createTime" label="操作时间" width="180">
      </el-table-column>
      <el-table-column prop="createBy" label="操作人" width="130">
      </el-table-column>
    </el-table>
    <el-row :gutter="20" class="page-list">
      <el-col :span="10" :offset="12">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </basic-container>
</template>
<script>
import { listLog } from "@/api/system/log";
import { dateFormat } from "@/util/date";
export default {
  data() {
    return {
      isLoading: true,
      pageSize: 10,
      totalNum: 0,
      currentPage: 1,
      queryDateange: "",
      quryForm: {
        title: "",
        reqUrl: "",
        createBy: "",
      },
      tableData: [],
      multipleSelection: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    queryBtn() {
      this.currentPage = 1;
      this.quryForm.pageNo = 1;
      this.quryForm.pageSize = this.pageSize;
      this.getDateange();
      this.listLog(this.quryForm);
    },
    resetQuryForm(form) {
      this.quryForm = {};
      this.queryDateange = "";
      this.currentPage = 1;
      this.quryForm.pageNo = 1;
      this.quryForm.pageSize = this.pageSize;
      this.listLog(this.quryForm);
    },
    getDateange() {
      if (this.queryDateange && this.queryDateange.length > 0) {
        this.quryForm.handleStart = dateFormat(new Date(this.queryDateange[0]));
        this.quryForm.handleEnd = dateFormat(new Date(this.queryDateange[1]));
      } else {
        this.quryForm.handleStart = "";
        this.quryForm.handleEnd = "";
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.quryForm.pageNo = this.currentPage;
      this.quryForm.pageSize = val;
      this.listLog(this.quryForm);
    },
    handleCurrentChange(val) {
      this.quryForm.pageNo = this.currentPage;
      this.quryForm.pageSize = this.pageSize;
      this.listLog(this.quryForm);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    initData() {
      this.currentPage = 1;
      this.listLog({});
    },

    listLog(data) {
      listLog(data).then((res) => {
        this.tableData = res.obj.list;
        this.totalNum = res.obj.total;
        this.isLoading = false;
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
